<template>
  <div class="zf">
    <div class="wx">
      <img src="/images/zf/收款码.jpg" alt="">
      <span>欢迎使用微信支付</span>
    </div>

    <div class="zfb">
      <img src="/images/zf/支付宝收款码.jpg" alt="">
      <span>欢迎使用支付宝支付</span>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      atatic: false,
      time: ''
    }
  },

  mounted() {
    this.time = setTimeout(() => {
      if (this.atatic == true) {
        this.$router.replace('/home')
        this.$message({
          type: 'warning',
          message: '如果没来得及支付,请重新添加购物车支付'
        }).catch(() => {})
      }
    }, 10000)
  },
  beforeCreate() {
    this.$confirm('请在10秒内进行微信或者支付宝支付!', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
      .then(() => {
        this.atatic = true
        this.$message({
          type: 'success',
          message: '请支付'
        })
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '取消支付'
        })
        clearTimeout(this.time)
        this.$router.replace('/home')
      })
  }
}
</script>

<style scoped lang='less'>
.zf {
  height: 100vh;
  width: 100vw;
  display: flex;
  margin: 0 auto;
  justify-content: space-around;
  .wx {
    font-size: 24px;
    font-weight: 800;
    width: 50%;
    display: flex;
   
    flex-direction: column;
    justify-content: center;
   align-items: center;
    img {
   
      height: 50%;
      width: 50%;
      border: 5px solid #1cd66c;
      border-radius: 20px;

    }
    span {
      color: #1cd66c;
      text-align: center;
     
    }
  }
  .zfb {
    font-size: 24px;
    font-weight: 800;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
     
      height: 50%;
      width: 50%;
      border: 5px solid #23abf2;
      border-radius: 20px;

    }
    span {
    text-align: center;
    color: #23abf2;
    }
  }
}
</style>